<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="shortcut icon" id="myicon"
    href="">
  <link href="../../assets/APlayer.min.css" rel="stylesheet">
  <!-- UIkit css -->
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css" /> -->
  <link rel="stylesheet" href="../css//uikit@3.2.2/uikit.min.css" />
  <link rel="stylesheet" href="../css/global.css">
</head>

<body ondblclick="openAPlayerList()">
  <audio id="bgMusic" hidden controls src="../../assets/躺在凌晨五点半的海岸.m4a" hidden></audio>

  <div class="w-screen h-screen flex justify-center items-center overflow-hidden overflow-y-scroll relative"
    style="background-color: #666699;min-width: 1400px;">

    <div>
      <div id="left" class="w-auto h-auto mr-20 text-yellow-300 text-9xl select-none">00:00</div>
      <div id="right" class="w-auto h-auto mr-20 text-yellow-300 text-9xl select-none">00:00</div>
    </div>
    <div class="w-2/5 h-auto flex flex-col my-7">
      <div class="w-full h-10 leading-3 flex justify-around items-center text-yellow-100 text-xl select-none">
        <input type="radio" id="MusicSet1" name="MusicSet" onclick="MusicSetFn('1')">
        <label for="MusicSet1">静音</label>
        <input type="radio" id="MusicSet2" name="MusicSet" onclick="MusicSetFn('2')">
        <label for="MusicSet2">部分</label>
        <input type="radio" id="MusicSet3" name="MusicSet" onclick="MusicSetFn('3')">
        <label for="MusicSet3">全部</label>
        <input type="checkbox" name="yb" id="yb" onclick="myCheckbox(this)" style="width: 16px; height: 16px;">
        <label for="yb">眼保</label>
        <input type="checkbox" name="tc" id="tc" onclick="myCheckbox(this)" style="width: 16px; height: 16px;">
        <label for="tc">体操</label>
        <input type="checkbox" name="tg" id="tg" onclick="myCheckbox(this)" style="width: 16px; height: 16px;">
        <label for="tg">运动</label>
        <label for="clear_" onclick="clearChoose(this)" style="color:#fff">取消</label>
      </div>
      <div onclick="pauseTo()" class="w-full rounded-md flex justify-center items-center py-7 text-3xl select-none"
        style="background-color: #CC9999;color: #FFFF99;" id="isPauseTo">暂停音乐</div>
      <div class="w-full flex justify-between my-10">
        <div class="w-full flex  items-center">
          <input value="45" type="number" id="myTime"
            style="border: 3px solid #a8dee5; height: 50px ; border-radius: 8px;">
          <label for="myTime" class="pl-2 text-xl text-yellow-200 select-none"> 专注时间
          </label>
        </div>
        <div class="w-full flex justify-end items-center">
          <label for="myTime2" class="pr-2 text-xl text-yellow-200 select-none"> 休息时间 </label>
          <input value="10" type="number" id="myTime2"
            style="border: 3px solid #a8dee5; height: 50px ; border-radius: 8px;">
        </div>
      </div>
      <div onclick="start()" class="w-full rounded-md flex justify-center items-center py-24 text-3xl select-none"
        style="background-color: #CC9999;color: #FFFF99;">要点击这里，使用户和页面产生交互
      </div>
    </div>

    <!-- 右侧功能区 -->
    <div class="absolute top-0 right-0 flex items-center justify-center ">
      <div class="w-16 h-16 flex bg-white shadow-xl p-3 m-3 cursor-pointer" style="border-radius: 50%;">
        <img src="../images/exercise.svg" alt="">
      </div>
      <div uk-drop="mode: click; pos: bottom-center" class="w-40 p-3 bg-white ">
        <div class="w-full flex justify-start items-center">
          <div class="text-center cursor-pointer select-none" onclick="ybjcFn()">眼保健操</div>
          <div class="text-center cursor-pointer select-none" onclick="gptc2()">广播体操</div>
          <div class="text-center cursor-pointer select-none" onclick="gqdtc()">大课间操</div>
        </div>
      </div>
      <div class="w-16 h-16 flex bg-white shadow-xl p-3 m-3 cursor-pointer" style="border-radius: 50%;">
        <img src="../images/clock.svg" alt="">
      </div>
      <div class="w-16 h-16 flex bg-white shadow-xl p-3 m-3 cursor-pointer" style="border-radius: 50%;">
        <img src="../images/setting.svg" alt="">
      </div>
      <div uk-drop="mode: click; pos: bottom-center" class="w-96 p-3 bg-white ">
        <p>使用说明</p>
        <p>1/ 音乐部分</p>
        <p>&emsp; 安装 油猴扩展配件.js 文件中的操作进行即可播放音乐</p>
        <p>2/ 视频部分</p>
        <p>&emsp; 在js文件夹中的 \js\additional.js 中搜索 mp4 即可知道。下载想要的视频到本地位置，然后修补 \js\additional.js 文件的的视频路径即可</p>
      </div>
    </div>

    <!-- 音乐播放器 -->
    <div class="w-64 h-screen flex flex-col items-center overflow-hidden z-10 absolute left-0 top-0">
      <div id="aplayer" style="width: 95%;"></div>
      <input type="text" name="search" id="search" onkeyup="searchFn(event, this)" class="w-11/12 px-3" />
      <div class="text-sm">
        <a target="_blank" href="https://aplayer.js.org/#/zh-Hans/?id=%E5%AE%89%E8%A3%85"
          style="display: auto;color: #eda7a7;">APlayer官方文档</a>
        <a target="_blank" href="https://music.163.com/" style="display: auto; color: #ef5e5e;">网易云</a>
        <a target="_blank" href="https://hifini.com/" style="display: auto; color: white;">歌曲地址</a></a>
      </div>
      <div id="lyric" class="w-full overflow-hidden overflow-y-scroll block"
        style="color: #fff366;height: 570px;margin: 5px 0;">
      </div>
    </div>

  </div>

  <!-- 句子鸡汤 -->
  <div>
    <div id="SentenceChickenSoup" onclick="updateSentenceChickenSoup()"
      class="w-full absolute bottom-5 flex justify-center items-center text-yellow-300 text-2xl">
    </div>
    <script>
      setTimeout(() => { updateSentenceChickenSoup() }, 500);
      function updateSentenceChickenSoup() {
        window.myWindow && window.myWindow.getSentenceChickenSoup && window.myWindow.getSentenceChickenSoup((text) => {
          document.getElementById('SentenceChickenSoup').innerHTML = text
        })
      }
    </script>
  </div>



  <!-- UIkit JS -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script> -->
  <script src="../js/uikit@3.2.2/uikit.min.js"></script>
  <script src="../js/uikit@3.2.2/uikit-icons.min.js"></script>

  <script src="../../assets/APlayer.min.js"></script>
  <script src="../js/tools.js"></script>
  <script src="../js/main.js"></script>
  <script src="../js/additional.js"></script>
  <script src="../js/video.js"></script>

</body>

<style>
  input:focus-visible {
    outline: none;
  }

  /* 小型播放器 */
  .aplayer-title {
    color: #666699;
    font-size: 18px !important;
  }

  .aplayer-list-title {
    color: #666699;
    font-size: 14px !important;
  }

  .aplayer .aplayer-list {
    position: fixed;
    overflow-y: scroll;
    display: block;
    z-index: 10000;
    background-color: white;
    height: auto;
    max-height: 400px;
    width: 243px;
  }

  [name="MusicSet"]:checked+label {
    color: #fff;
  }

  ::-webkit-scrollbar {
    width: 0px;
    height: 0px
  }
</style>

</html>